<template>
  <div>
    <!--修改密码-->
    <el-dialog title="修改密码" width="576px" :visible.sync="change_password">
      <el-form>
        <el-form-item label="初始密码：" :label-width="formLabelWidth">
          <el-input v-model="initial_password" show-password maxlength="20"
                    placeholder="密码的长度应为8~20，由大小写字母+数字" @blur="verify_password1"></el-input>
          <i v-if="el_icon_circle=='true'" class="el-icon-circle-check"></i>
          <i v-if="el_icon_circle=='false'" class="el-icon-circle-close"></i>
        </el-form-item>
        <el-form-item label="新密码：" :label-width="formLabelWidth">
          <el-input v-model="new_password" show-password maxlength="20" placeholder="密码的长度应为8~20，由大小写字母+数字"
                    @blur="new_password1"></el-input>
          <i v-if="el_icon_circle1=='true'" class="el-icon-circle-check"></i>
          <i v-if="el_icon_circle1=='false'" class="el-icon-circle-close"></i>
        </el-form-item>
        <el-form-item label="确认密码：" :label-width="formLabelWidth">
          <el-input v-model="confirm_password" show-password maxlength="20"
                    placeholder="密码的长度应为8~20，由大小写字母+数字" @blur="new_password2"></el-input>
          <i v-if="el_icon_circle2=='true'" class="el-icon-circle-check"></i>
          <i v-if="el_icon_circle2=='false'" class="el-icon-circle-close"></i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="change_password = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {api, baseAjax} from '../api/api';
  import Cookies from 'js-cookie';
  import bus from '../assets/js/eventBus';
  import {statusCode} from '../utils/index';
  import EncryUtil from "@/utils/encrypt";

  export default {
    data() {
      return {
        moor_info: {},//拨打电话信息
        user_info: [],
        /*修改密码*/
        change_password: false,
        formLabelWidth: '100px',
        initial_password: '',
        new_password: '',
        confirm_password: '',
        el_icon_circle: '',
        el_icon_circle1: '',
        el_icon_circle2: '',
        caret: true,
        is_deal_promit: false
      }
    },
    components: {
      
    },
    computed: {
      
    },
    created() {
        let that = this;
        bus.$on('change_password', (res)=>{
            that.change_password = res;
        });
    },
    mounted() {
      let moor = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('moorInfo')));
      this.moor_info = moor;
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
    },
    methods: {
      //修改密码
      verify_password1() {
        if (this.initial_password == '') {
          this.el_icon_circle = '';
        } else if (/^[a-zA-Z0-9]+$/i.test(this.initial_password) && this.initial_password.length >= 8) {
          let data = {
            repId: this.moor_info.repId,
            password: this.initial_password,
          };
          baseAjax(api.query_password, data, (res) => {
            if (res.code == 200) {
              if (res.data) {
                this.el_icon_circle = 'true';
              } else {
                this.el_icon_circle = 'false';
              }
            }
          });
        } else {
          this.el_icon_circle = 'false';
        }
      },
      new_password1() {
        if (this.new_password == '') {
          this.el_icon_circle1 = '';
        } else if (/^[a-z0-9]+$/i.test(this.new_password) && this.new_password.length >= 8) {
          this.el_icon_circle1 = 'true';
        } else {
          this.el_icon_circle1 = 'false';
        }
      },
      new_password2() {
        if (this.confirm_password === this.new_password) {
          this.el_icon_circle2 = 'true';
        } else {
          this.el_icon_circle2 = 'false';
        }
      },

      determine() {
        if (this.el_icon_circle == 'true') {
          if (this.el_icon_circle1 == 'true') {
            if (this.el_icon_circle2 == 'true') {
              let data = {
                repId: this.moor_info.repId,
                passwordOld: this.initial_password,
                passwordNew: this.confirm_password,
              };
              baseAjax(api.change_password, data, (res) => {
                if (res.code == 200) {
                  if (res.data) {
                    this.change_password = false;
                    this.$message.success('修改成功');
                    this.initial_password = '';
                    this.new_password = '';
                    this.confirm_password = '';
                    this.el_icon_circle = '';
                    this.el_icon_circle1 = '';
                    this.el_icon_circle2 = '';
                  }
                }
              });
            } else {
              this.new_password2()
            }
          } else {
            this.new_password1()
          }
        } else {
          this.verify_password1()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*修改密码*/
  .el-dialog {
    .el-input {
      width: 300px;
    }

    .el-icon-circle-check {
      color: #67c23a;
      font-size: 18px;
      vertical-align: middle;
      margin-left: 20px;
    }

    .el-icon-circle-close {
      color: #f56c6c;
      font-size: 18px;
      vertical-align: middle;
      margin-left: 20px;
    }
  }

</style>
